<template>
  <div>
    <div v-if="shows == 'list'">
      <heads />
      <Header>
        <el-button
          plain
          size="mini"
          type="primary"
          @click="
            shows = 'form';
            $emit('showTag', false);
          "
          >新建自提点</el-button
        >
      </Header>
      <Header :type="'screening'" @tag="getList" @reset="reset">
        <div class="head-tit">
          内容筛选
        </div>
        <div class="head-operation">
          <span class="head-label">
            选择门店所在省：
          </span>
          <el-select
            v-model="province"
            size="small"
            class="head-input"
            placeholder="请选择"
            @change="selectOneTag"
          >
            <el-option
              v-for="item in optionsOne"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span class="head-label">
            选择门店所在市：
          </span>
          <el-select
            v-model="city"
            size="small"
            class="head-input"
            placeholder="请选择"
            @change="selectTwoTag"
          >
            <el-option
              v-for="item in optionsTwo"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span class="head-label">
            选择门店所在区：
          </span>
          <el-select
            v-model="area"
            size="small"
            class="head-input"
            placeholder="请选择门"
          >
            <el-option
              v-for="item in optionsThree"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="head-operation">
          <span class="head-label">
            选择状态：
          </span>
          <el-select
            v-model="status"
            size="small"
            class="head-input"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsFour"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span class="head-label">
            内容搜索：
          </span>
          <el-input
            v-model="name"
            placeholder="请输入内容"
            size="medium"
            class="head-input"
          >
          </el-input>
        </div>
      </Header>
      <Main :data="listData" :footer-lock="totals > 10">
        <el-table-column width="30" type="selection"> </el-table-column>
        <el-table-column
          label="自提点名称"
          align="center"
          property="name"
        ></el-table-column>

        <el-table-column
          label="自提点地址"
          align="center"
          property="address"
        ></el-table-column>
        <el-table-column
          label="联系电话"
          align="center"
          property="phone"
        ></el-table-column>
        <el-table-column label="营业时间" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.open_time }}
            </div>
            <div>
              <span v-for="(item, index) in scope.row.open_week" :key="index">
                <span v-if="item == 1">周一&nbsp;&nbsp;</span>
                <span v-if="item == 2">周二&nbsp;&nbsp;</span>
                <span v-if="item == 3">周三&nbsp;&nbsp;</span>
                <span v-if="item == 4">周四&nbsp;&nbsp;</span>
                <span v-if="item == 5">周五&nbsp;&nbsp;</span>
                <span v-if="item == 6">周六&nbsp;&nbsp;</span>
                <span v-if="item == 7">周日</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          property="continuation_price"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="switchTag(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          class-name="tableoperation"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="edit(scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="text" @click="del(scope.row.point_id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </Main>
      <Footer :total="totals">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer>
    </div>
    <invite-manage-form v-if="shows == 'form'" :data-msg="dataMsg" @out="out" />
  </div>
</template>
<script>
import { YOUSELFPOINTLIST, EDITSTATUS, DELYOURSELFPOINT } from "../../service";

import { FOURLEVELLINKAGE } from "@/service/public";
import heads from "../component/heads";
export default {
  components: {
    inviteManageForm: () => import("./form"),
    heads
  },
  data() {
    return {
      listData: [],
      totals: 0,
      pages: 1,
      shows: "list",
      optionsOne: [],
      optionsTwo: [],
      optionsThree: [],
      optionsFour: [
        { id: 2, name: "所有状态" },
        { id: 0, name: "未启用" },
        { id: 1, name: "启用" }
      ],
      dataMsg: {},
      name: "",
      province: "",
      city: "",
      area: "",
      status: 2
    };
  },

  created() {
    this.getList();
    this.getAddress();
  },
  methods: {
    async getAddress(obj, num) {
      await FOURLEVELLINKAGE(obj).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          if (num === 1) {
            this.optionsTwo = data;
            this.optionsTwo.unshift({ id: "", name: "门店所在市" });
          } else if (num === 2) {
            this.optionsThree = data;
            this.optionsThree.unshift({ id: "", name: "门店所在区" });
          } else {
            this.optionsOne = data;
            this.optionsOne.unshift({ id: "", name: "门店所在省" });
          }
        } else {
          this.$message.error(msg);
        }
      });
    },
    selectOneTag(e) {
      if (e) {
        this.getAddress({ oneid: e }, 1);
      } else {
        this.getAddress();
      }
      this.city = "";
      this.area = "";
      this.optionsTwo = [];
      this.optionsThree = [];
    },
    selectTwoTag(e) {
      if (e) {
        this.getAddress({ twoid: e }, 2);
      } else {
        this.getAddress();
      }
      this.area = "";
      this.optionsThree = [];
    },
    out() {
      this.shows = "list";
      this.dataMsg = {};
      this.$emit("showTag", true);
      this.getList();
    },
    edit(e) {
      this.dataMsg = e;
      this.shows = "form";
      this.$emit("showTag", false);
    },
    async switchTag(e) {
      await EDITSTATUS({ point_id: e.point_id, status: e.status ? 1 : 0 }).then(
        res => {
          let { code, msg } = res;
          if (code === 200) {
            this.getList();
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        }
      );
    },
    async del(pointId) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          DELYOURSELFPOINT({ point_id: pointId }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.getList();
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          });
        });
    },
    reset() {
      this.name = "";
      this.province = "";
      this.city = "";
      this.area = "";
      this.status = 2;
      this.getList();
    },
    async getList() {
      await YOUSELFPOINTLIST({
        name: this.name,
        province: this.province,
        city: this.city,
        area: this.area,
        status: this.status,
        page: this.pages,
        pageshow: 10
      }).then(res => {
        let { code, data } = res;
        if (code === 200) {
          this.totals = data.count;
          data.list.forEach(ele => {
            ele.status = ele.status === 1;
            ele.open_week = ele.open_week.split(",");
            ele.open_week.sort();
          });
          this.listData = data.list;
        } else {
          this.listData = [];
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped></style>
